import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/model/health/sys_describe.dart';
import 'package:flutter_eve_plugin/pages/health/actions.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/health/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class SysDescribeWidget extends StatelessWidget {
  const SysDescribeWidget({
    Key key,
    @required this.descList,
  }) : super(key: key);

  final List<SysDescribeModel> descList;

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
        converter: (store) => AppStateViewModel(
            state: store.state,
            healthStateViewModel:
                HealthStateViewModel(homeDescClick: (String link, int index) {
              store.dispatch(healthSysCurrPage(store, index));
              Navigator.pushNamed(context, link);
            })),
        builder: (context, vm) {
          return SliverFixedExtentList(
              itemExtent: setRatio(65),
              delegate: SliverChildListDelegate(
                descList.map((item) {
                  return GestureDetector(
                    onTap: () {
                      vm.healthStateViewModel
                          .homeDescClick(item.link, item.index);
                    },
                    child: buildItem(item),
                  );
                }).toList(),
              ));
        });
  }

  Container buildItem(SysDescribeModel item) {
    return Container(
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: Text(
                      '${item.title}',
                      style: TextStyle(
                          color: Color(0xFF856BFF), fontSize: setTextSp(12)),
                    ),
                    padding:
                        EdgeInsets.only(left: setRatio(23), top: setRatio(10)),
                  ),
                  flex: 2,
                ),
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(top: setRatio(10)),
                    child: Text(
                      '${item.desc}',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          color: Color(0xFF999999), fontSize: setTextSp(11)),
                    ),
                  ),
                  flex: 5,
                ),
                Expanded(
                  child: Container(
                    child: Image.asset(
                      imageUtilHuPo('health/icon_more@2x'),
                      width: setRatio(10),
                      height: setRatio(18),
                    ),
                    padding:
                        EdgeInsets.only(top: setRatio(18), right: setRatio(23)),
                  ),
                  flex: 1,
                )
              ],
            ),
            SizedBox(
              height: setRatio(15),
            ),
            Container(
              width: setRatio(329),
              height: setRatio(1),
              padding: EdgeInsets.only(left: setRatio(23)),
              color: Color(0xFFE5E5E5),
            )
          ],
        ),
      ),
    );
  }
}
